<template>
  <page-header-wrapper>
    <page-tab-list>
      <div class="table-page-search-box">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="8" :sm="24">
              <a-form-item label="用户搜索">
                <a-select v-model="queryParam.delivery">
                  <a-select-option value="express"> 快递 </a-select-option>
                  <a-select-option value="shop"> 门店自提 </a-select-option>
                  <a-select-option value="delivery"> 同城配送 </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="起止时间">
                <a-range-picker
                  format="YYYY-MM-DD HH:mm"
                  valueFormat="YYYY-MM-DD HH:mm"
                  :placeholder="['开始时间', '结束时间']"
                  v-model="queryParam.queryTime"
                />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="">
                <a-button type="primary" @click="getList">查询</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </page-tab-list>
    <a-card :bordered="false" class="card_style_re" style="margin-top: 16px">
      <div class="table-operator" style="display: flex; justify-content: space-between">
        <a-radio-group v-model="queryParam.shop_audit" @change="getList">
          <a-radio-button value="-1"> 全部 </a-radio-button>
          <a-radio-button value="0"> 已审核 </a-radio-button>
          <a-radio-button value="1"> 未审核 </a-radio-button>
          <a-radio-button value="1"> 已拒绝 </a-radio-button>
          <a-radio-button value="1"> 已打款 </a-radio-button>
        </a-radio-group>
        <div>
          <a-button type="primary" @click="showWithdraw = true">+ 提现</a-button>
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item @click="allDelete">批量删除</a-menu-item>
            </a-menu>
            <a-button> 批量操作 </a-button>
          </a-dropdown>
        </div>
      </div>
      <a-alert type="info" show-icon style="margin: 10px 0" v-if="selectedRowKeys.length">
        <span slot="message">
          已选择 <span style="color: red">{{ selectedRowKeys.length }}</span> 项
        </span>
      </a-alert>
      <a-table
        :rowKey="
          (r, i) => {
            return r.id
          }
        "
        :pagination="{
          total: this.totalCount,
          showSizeChanger: false,
          onChange: this.tablePageChange,
        }"
        :columns="columns"
        :data-source="list"
        :scroll="{ x: 'max-content' }"
      >
        <div slot="name" slot-scope="text, record">
          <div class="name">
            <div class="pic">
              <img :src="record.goods_list[0].pic" alt="" />
            </div>
            <div class="info">
              <span>{{ record.goods_list[0].goods_name }}</span>
              <span>规格：{{ record.goods_list[0] | sku }}</span>
            </div>
          </div>
        </div>
        <span slot="mobile" slot-scope="scope"> {{ scope.name }} / {{ scope.mobile }} </span>
        <span slot="audit_time" slot-scope="text">
          {{ text > 0 ? $moment(text * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}
        </span>
        <div slot="buy" slot-scope="scope">
          <div>{{ scope.nickname }}</div>
          <div>{{ scope.created_at > 0 ? $moment(scope.created_at * 1000).format('YYYY-MM-DD HH:mm:ss') : '-' }}</div>
        </div>
        <span
          slot="range_profit"
          slot-scope="text, scope"
          class="level_one_count"
          @click="toCommission(scope.type_id, 2)"
        >
          ￥{{ text || 0 }}
        </span>
        <span
          slot="agent_profit"
          slot-scope="text, scope"
          class="level_one_count"
          @click="toCommission(scope.type_id, 3)"
        >
          ￥{{ text || 0 }}
        </span>
        <div slot="expandedRowRender" slot-scope="record">
          <div class="name" style="padding: 10px 0" v-for="(item, index) in record.goods_list" :key="index">
            <div class="pic">
              <img :src="item.pic" alt="" />
            </div>
            <div class="info">
              <span>{{ item.goods_name }}</span>
              <span>规格：{{ item | sku }}</span>
            </div>
          </div>
        </div>
      </a-table>
    </a-card>
    <!-- 提现申请弹窗 -->
    <a-modal
      title="申请提现"
      v-model="showWithdraw"
      :afterClose="closeModal"
      @ok="submitApply"
      :destroyOnClose="true"
      width="800px"
    >
      <a-form-model
        ref="ruleForm"
        :model="withdrawForm"
        :rules="rules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 14 }"
      >
        <a-form-model-item label="转账方式">
          <a-radio-group v-model="withdrawForm.cash_type">
            <a-radio value="1"> 微信线下转账 </a-radio>
            <a-radio value="2"> 支付宝转账 </a-radio>
            <a-radio value="3"> 银行卡转账 </a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item
          :label="withdrawForm.cash_type == 1 ? '微信号' : withdrawForm.cash_type == 2 ? '支付宝账号' : '银行卡号'"
          prop="account"
        >
          <a-input v-model="withdrawForm.account" />
        </a-form-model-item>
        <a-form-model-item label="银行卡开户行" prop="bank_name" v-if="withdrawForm.cash_type == 3">
          <a-input v-model="withdrawForm.bank_name" />
        </a-form-model-item>
        <a-form-model-item
          :label="withdrawForm.cash_type == 1 ? '微信昵称' : withdrawForm.cash_type == 2 ? '支付宝昵称' : '姓名'"
          prop="name"
        >
          <a-input v-model="withdrawForm.name" />
        </a-form-model-item>
        <a-form-model-item label="提现金额" prop="price">
          <a-input v-model="withdrawForm.price" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { creatWithdrawAupply } from '@/api/purchase/supplier'
import tabList from '@/views/saas/components/tabList.vue'
import { cyyUploadImg } from '@/components/CyyUi'
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '供货商',
    scopedSlots: {
      customRender: 'name',
    },
    width: 200,
  },
  {
    title: '提现方式',
    dataIndex: 'created_at',
  },
  {
    title: '提现金额',
    dataIndex: 'audit_time',
    sorter: (a, b) => a.created_at - b.created_at,
  },
  {
    title: '状态',
    dataIndex: 'audit_time',
  },
  {
    title: '申请时间',
    dataIndex: 'audit_time',
    sorter: (a, b) => a.created_at - b.created_at,
  },
  {
    title: '审核时间',
    dataIndex: 'audit_time',
    sorter: (a, b) => a.created_at - b.created_at,
  },
  {
    title: '操作',
    dataIndex: 'action',
  },
]

export default {
  components: {
    tabList,
    cyyUploadImg,
  },
  data() {
    let checkAccount = (rule, value, callback) => {
      console.log(rule, value)
      if (!value) {
        if (rule.field == 'account') {
          if (this.withdrawForm.cash_type == 1) {
            callback(new Error('请输入微信号'))
          }
          if (this.withdrawForm.cash_type == 2) {
            callback(new Error('请输入支付宝账号'))
          }
          if (this.withdrawForm.cash_type == 3) {
            callback(new Error('请输入银行卡卡号'))
          }
        }
        if (rule.field == 'name') {
          if (this.withdrawForm.cash_type == 1) {
            callback(new Error('请输入微信昵称'))
          }
          if (this.withdrawForm.cash_type == 2) {
            callback(new Error('请输入支付宝昵称'))
          }
          if (this.withdrawForm.cash_type == 3) {
            callback(new Error('请输入姓名'))
          }
        }
      } else {
        callback()
      }
    }
    return {
      tabList: [
        {
          key: 'saasSupplierPurchaseBalance',
          name: '余额变动记录',
        },
        {
          key: 'saasSupplierPurchaseWithdraw',
          name: '提现记录',
        },
      ],
      // 搜索参数
      queryParam: {
        order_no: null,
        name: null,
        pageNo: 1,
        pageSize: 10,
      },
      selectedRowKeys: [],
      columns,
      list: [],
      // 提现表单
      withdrawForm: {
        price: '',
        type: '2',
        cash_type: '1',
        account: '',
        name: '',
        bank_name: '',
      },
      rules: {
        price: [{ required: true, message: '请输入提现金额', trigger: 'blur' }],
        account: [{ required: true, validator: checkAccount, trigger: 'blur' }],
        name: [{ required: true, validator: checkAccount, trigger: 'blur' }],
        bank_name: [{ required: true, message: '请输入银行卡开户行', trigger: 'blur' }],
      },
      // 是否显示申请提现的弹窗
      showWithdraw: false,
      btnLoading: false,
    }
  },
  created() {},
  methods: {
    // 关闭弹窗的回调
    closeModal() {
      this.$refs['ruleForm'].resetFields()
    },
    // 分页请求
    tablePageChange(e) {
      this.queryParam.pageNo = e
      this.getList()
    },
    // 获取数据
    getList() {},
    // 创建提现申请
    submitApply() {
      this.$refs['ruleForm'].validate(async (valid) => {
        if (valid) {
          this.btnLoading = true
          const res = await creatWithdrawAupply(this.withdrawForm)
          if (res.code == 0) {
            this.showWithdraw = false
            this.getList()
          }
          this.btnLoading = false
        } else {
          return false
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.searchBox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /deep/ .ant-input-affix-wrapper {
    width: 220px;
    margin-right: 20px;
  }
  .select {
    margin-top: 11px;
    display: flex;
    align-items: center;
    margin-right: 15px;
  }
  .ant-btn {
    margin-top: 11px;
  }
}
.tip {
  line-height: normal;
  margin-bottom: 0;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
}
</style>
